<template>
  <div>
    <n-space vertical size="large">
      <n-layout>

        <n-card :title="courseName" style="margin-bottom: 16px">
          <n-tabs v-model:value="activeKey" @update:value="handleUpdate" type="segment" justify-content="space-evenly" animated>
            <n-tab-pane name="chapter" tab="章节">
              
            </n-tab-pane>
            <n-tab-pane name="discuss" tab="讨论">
              
            </n-tab-pane>
            <n-tab-pane name="exam" tab="测验">
              
            </n-tab-pane>
          </n-tabs>
          <!-- <n-menu v-model:value="activeKey" mode="horizontal" :options="menuOptions" @update:value='handleUpdate'/> -->
          
          <router-view />
        </n-card>
      </n-layout>
    </n-space>
  </div>
</template>
<script lang="ts">
export default defineComponent({
    // 需要和路由的name一致
    name:"student_course_detail"
  });
</script>
<script lang="ts" setup>
import { getCourseName } from '@/api/student/studentCourse';
import {  defineComponent, onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
  const activeKey = ref();
const router = useRouter();
const route = useRoute();

if(route.name == 'student_chapter'){
        activeKey.value='chapter';
    }else{
        activeKey.value='discuss';
    }


function handleUpdate(key){
    if(key == 'chapter'){
        router.push({name:'student_chapter'});
    }
    if(key == 'discuss'){
        router.push({name:'student_discuss'});
    }
    if(key == 'exam'){
      router.push({name:'student_exam'});
    }
}

const courseName = ref('cname');

onMounted(async () => {
    if(route.name == 'student_chapter'){
        activeKey.value='chapter';
    }else if(route.name == 'student_discuss'){
        activeKey.value='discuss';
    }else if(route.name == 'student_exam'){
        activeKey.value='exam';
    }else if(route.name == 'student_exam_detail' || route.name == 'student_exam_answer'){
        activeKey.value='exam';
    }
    //通过localStorge解决缓存问题
    let oldCourseInfo = sessionStorage.getItem('courseInfo');
    if(oldCourseInfo == null || JSON.parse(oldCourseInfo)['courseID'] !=route.params.courseID || JSON.parse(oldCourseInfo)['SID'] == null){
      let courseInfo = await getCourseName({courseID:route.params.courseID});
      sessionStorage.setItem('courseInfo',JSON.stringify(courseInfo));
      courseName.value = courseInfo.courseName;
    }else{
      courseName.value = JSON.parse(oldCourseInfo)['courseName'];
    }
    
});

</script>
<style lang="less" scoped>
.thing-cell {
  float: left;
  margin: 0 10px;

  &:hover {
    background: #f3f3f3;
    cursor: pointer;
  }
}

.thing-cell-on {
  background: #f0faff;
  color: #2d8cf0;

  ::v-deep(.n-thing-main .n-thing-header .n-thing-header__title) {
    color: #2d8cf0;
  }

  &:hover {
    background: #f0faff;
  }
}
</style>
